<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="btn">逆转世界</button>
  </div>
</template>

<script>
// 需求：翻转世界
// 1. 定义变量 message
// 2. 使用 插值表达式 在 p标签里面 显示 message 变量的值
// 3. 给按钮绑定事件 fn函数
// 4. 在 methods 定义 fn 的函数
// 5. 使用 split('') 方法 将字符串 拆分为 数组
// 6. 使用 reverse() 方法 将数组 翻转
// 7. 使用 join('') 方法 将数组 拼接成 字符串
// 8. 将字符串 赋值为 this.message
export default {
  data() {
    return {
      message: "HELLO, WORLD",
    };
  },
  methods: {
    btn() {
      this.message = this.message.split("").reverse().join("");
    },
  },
};
</script>
